<template>
    <div>
        <header style="position: relative">
            <div class="sub-title">
                <div class="sub-text">本年全省交易曲线图</div>
                <p class="sub-text-en">Transaction curve of the whole province this year</p>
            </div>
        </header>
        <div>
            <v-chart style="width: 100%;height: 320px" :options="option"></v-chart>
        </div>
    </div>
</template>
<script>
    export default {
        name:'tradingCurve',
        components: {
        },
        props: {
        },
        data () {
            return {
                option:{
                    grid:{
                        left:60,
                        bottom:40,
                        right:20
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        formatter:'{b}:<br />成交量：{c}'
                    },
                    xAxis: {
                        data: ['1月', '2月', '3月', '4月','5月', '6月', '7月', '8月','9月', '10月', '11月', '12月'],
                        splitLine: {show: false},
                        type:'category',
                        axisLabel:{
                            color:'#E4E6F0',
                            interval:0
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#6D7498'
                            }
                        },
                        axisTick: {
                            show:false
                        },
                    },
                    yAxis: {

                        axisTick: {
                            show:false
                        },
                        axisLabel: {
                            color:'#6D7498'
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#6D7498'
                            }
                        },
                        type:'value',
                        splitLine: {show: false},
                        name:'单位/万斤',
                        nameTextStyle:{
                            color:'#fff'
                        },
                        position:'top',
                    },

                    animationDurationUpdate: 1200,
                    series: [ {
                        type: 'line',
                        itemStyle: {
                            normal: {
                                color: '#00FFFF'
                            }
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(0,0,251,0.7)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(0,0,251,0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: [45, 60, 13, 25,45, 60, 13, 25,45, 60, 13, 25]
                    }]
                }
            }
        },
        computed: {
        },
        methods: {
            init(){
            }
        },
        mounted () {
            this.init()
        },
        created(){
        }
    }

</script>
<style>
    /**
     * The default size is 600px×400px, for responsive charts
     * you may need to set percentage values as follows (also
     * don't forget to provide a size for the container).
     */
    .echarts {
        width: 100%;
        height: 100%;
    }
</style>